import React, { Component } from 'react'

export default class Demo extends Component {
    render() {
        return (
            <div style={{backgroundColor:'red',padding:'10px'}}>
                <h1>我是组件Demo</h1>
                <A render={(name) => <B name={ name}/> }/>
            </div>
        )
    }
}

class A extends Component {
    state = {name: '张三'}
    render() {
        return (
            <div style={{backgroundColor:'orange',padding:'10px'}}>
                <h1>我是组件A</h1>
                {this.props.render(this.state.name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div style={{backgroundColor:'skyblue',padding:'10px'}}>
                <h1>我是组件B,名字：{ this.props.name }</h1>
            </div>
        )
    }
}